<template>
	<view class="buycart-main">
		<view class="topbar">
			<text class="back" @tap="goback()"> < </text>
			<text>购物车</text>
		</view>
		<checkbox-group @change="ckChange">
			<view class="product-card" v-for="item in cartList" :key="item.skuId">
				<view class="info-block">
					<label>
						<checkbox :value="item.skuId" :checked="num===1"/>
					</label>
					<view class="nav">
						<image class="cover-img" :src="item.cover_img" mode=""></image>
						<view class="info-text">
							<view class="gname">{{item.gname}}</view>
							<view class="code">
								<view>编号: {{item.sku_code}}</view>
								<view>价格: ¥{{item.price}}</view>
							</view>
							<view>库存: {{item.count}}</view>
						</view>
					</view>
				</view>
			
				<view class="buy-count-steps">
					<text class="step-reduce" @tap="decre(item)">-</text>
					<text class="step-text" v-model="goodsnum">{{goodsnum}}</text>
					<text class="step-add" @tap="incre(item)">+</text>
				</view>
			</view>
		</checkbox-group>
		
		<view class="footer-bar">
			<view class="sel-all">
		        <checkbox-group @change="chooseAll">
				<label>
					<text>全选</text>
					<checkbox value="0" :checked="num===1"/>
				</label>
		        </checkbox-group>
			</view>
			<view>
				<text>合计: ¥ {{total}}</text>
				<text class="btn">结算</text>
			</view>
		</view>
	</view>
</template>

<script>
	import { cartList } from "../../../api/mine/cartlist.js"
	export default{
		data(){
			return{
				goodsnum:2,
				userId:'',
				cartList:[],
				num:0,
				count:0,
				checkbox:[],
				paylist:[],
				total:0
			}
		},
		methods:{
			goback(){
				uni.switchTab({
				    url: '/pages/mine/mine',
				});
			},
			decre(){
				if(this.goodsnum>1){
					this.goodsnum--
				}
				
			},
			incre(item){
				if(this.goodsnum<item.count){
					this.goodsnum++
				}
			},
			ckChange(e){
				console.log(e)
				// console.log(this.cartList.length)
				var arr = e.detail.value
				this.count = arr.length
				if(this.count===this.cartList.length){
					this.num = 1
				}else{
					this.num = 0
				}
				this.total = 0
				for(var i=0;i<arr.length;i++){
					var choosenItem = this.cartList.find(el=>el.skuId===arr[i])
					this.total += choosenItem.price * this.goodsnum
					// this.paylist.push(choosenItem)
				}
				console.log(this.total)
			},
			chooseAll(e){
				// console.log(e.detail)
				this.num = e.detail.value.length
				if(e.detail.value.length>0){
					this.cartList.forEach(item=>{
						this.checkbox.push(item.skuId)
					})
				}else{
					this.checkbox = []
				}
				
			}
		},
		onLoad(){
			
		},
		onShow(){
			const value = uni.getStorageSync('userData');
			// console.log(value)
			if (value) {
			   this.userId = value.id
			   cartList({
			   	userId:'bdecbb72264e4ec581061d4770a2e914'
			   })
			   .then(res=>{
			   	console.log(res)
				this.cartList = res.data.data
			   })
			}
		}
	}
</script>

<style scoped lang="scss">
	.topbar{
		position: fixed;
		left: 0;
		top: 0;
		background-color: #354e44;
		color: #fff;
		width: 100%;
		height: 44px;
		line-height: 44px;
		text-align: center;
		z-index: 998;
		.back{
			font-size: 24px;
			position: absolute;
			left: 20px;
		}
	}
	.buycart-main {
		margin-top: 60px;
		.product-card {
			width: 336px;
			height: 118px;
			margin: 25px auto;
			background-color: #fff;
			border-radius: 12px;
			padding: 10px;
			box-sizing: border-box;

			.info-block {
				display: flex;
				justify-content: flex-start;
				align-items: center;

				.nav {
					display: flex;
					justify-content: flex-start;
					align-items: center;

					.cover-img {
						width: 68px;
						height: 68px;
						flex-shrink: 1;
					}

					.info-text {
						font-size: 12px;
						color: #8D8D8D;
						margin-left: 23px;

						.gname {
							font-size: 13px;
							color: #3E3E3E;
						}

						.price {
							display: flex;
							justify-content: space-between;
							align-items: center;
						}

					}
				}

			}

			.buy-count-steps {
				display: flex;
				justify-content: flex-end;

				.step-reduce,
				.step-add,
				.step-text {
					width: 30px;
					height: 30px;
					background: #F1ECE7;
					border-radius: 50%;
					text-align: center;
					line-height: 30px;
					font-size: 15px;
					margin: 0 3px;
				}

				.step-text {
					width: 45px;
					border-radius: 15px;
				}
			}
		}
		.footer-bar{
			position: fixed;
			display: flex;
			justify-content: space-around;
			align-items: center;
			left: 0;
			bottom: 0;
			width: 100%;
			height: 75px;
			background-color: #fff;
			.btn{
				display: inline-block;
				width: 104px;
				height: 40px;
				background: #354E44;
				border-radius: 7px;
				color: #fff;
				font-size: 18px;
				line-height: 40px;
				text-align: center;
			}
		}
	}
</style>
